<template>
  <div class="addOrEditQueueBox">
    <breadcrumb :titleArr="titleArr" @back="breadcrumbBack" class="bread-crumb"></breadcrumb>
    <div class="queueBoxCont">
      <p class="title" style="marginBottom: 16px;">基本信息</p>
      <el-form class="m7-form baseInfo" :rules="baseInfoRule"
        size="mini" :model="baseInfoFrom"
        ref="baseInfoRuleFrom" label-position="top">
        <el-form-item label="技能组名称" prop="name">
          <el-input v-model.trim="baseInfoFrom.name" :maxlength="100" placeholder="请输入至少2位技能组名称" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <p class="title" style="margin-top: 40px;">参数配置</p>
      <el-tabs v-model="activeName" style="margin-top: 4px;margin-top: 16px;">
        <div class="warnText" v-show="activeName === 'agent'">
          <span class="el-icon-info"></span>
          组内成员可以设置技能值，用于座席分配策略按技能优先分配，数值越高优先接听。
        </div>
        <el-tab-pane label="座席成员" name="agent">
          <new-transfer
            filterable
            size="mini"
            :filter-method="filterMethod"
            :titles="['座席列表', '组内成员']"
            :button-texts="['移出技能组', '加入技能组']"
            filter-placeholder="请输入座席成员"
            v-model="uidsArr"
            :data="agentList">
            <span slot-scope="{ option }">
              <span class="label">{{ option.label }}</span>
              <m7Select size="mini"
                class="transferIpt"
                :isShowUpIcon="false"
                v-model="selectValue[option.key]"
                :options="selectData"
                placeholder="请选择">
              </m7Select>
              <!-- <el-input class="transferIpt" type="number" v-model="selectValue[option.key]" placeholder="请输入" size="mini"></el-input> -->
            </span>
          </new-transfer>
        </el-tab-pane>
        <el-tab-pane label="通话配置" name="callConfig">
          <callQueueConfig ref="callQueueConfigRef" style="margin-top: 9px;"></callQueueConfig>
        </el-tab-pane>
        <el-tab-pane label="在线客服配置" name="webchatConfig">
          <webchatQueueConfig ref="webchatQueueConfigRef" style="margin-top: 9px;"></webchatQueueConfig>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="more-btn">
      <el-button class="cancel" size="mini" @click="cancelFun">取消</el-button>
      <el-button size="mini" type="primary" @click="saveFun">提交</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
import callQueueConfig from '@/views/config/queue/callQueueConfig.vue'
import webchatQueueConfig from '@/views/config/queue/webchatQueueConfig.vue'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { organizationConfigModule } from '@/store/modules/config/organizationConfig/index'
// eslint-disable-next-line no-unused-vars
import { Form as ElForm } from 'element-ui'
import NewTransfer from '@/components/V7transfer/index.vue'
interface ArrayObj {
  props: {}
}
@Component({
  name: 'addOrEditQueue',
  components: {
    callQueueConfig,
    breadcrumb,
    webchatQueueConfig,
    NewTransfer
  }
})
export default class AddOrEditQueue extends Vue {
  [x: string]: any
  @Prop(Array) public agentList!: ArrayObj[] // 技能组数据
  @Prop({ default: [] }) private titleArr!: any
  @Ref() private readonly callQueueConfigRef !: callQueueConfig
  @Ref() private readonly webchatQueueConfigRef !: webchatQueueConfig
  private agentOptions = []

  private uidsArr = []

  private selectValue = {}

  private baseInfoRule = {
    name: [{ required: true, trigger: 'blur', message: '请输入至少2位技能组名称' }]
  }

  private baseInfoFrom = {
    name: ''
  }

  private currentQueueId = ''

  private selectData = [
    { label: '1', value: 1 },
    { label: '2', value: 2 },
    { label: '3', value: 3 },
    { label: '4', value: 4 },
    { label: '5', value: 5 },
    { label: '6', value: 6 },
    { label: '7', value: 7 },
    { label: '8', value: 8 },
    { label: '9', value: 9 },
    { label: '10', value: 10 }
  ]

  private activeName = 'agent'

  private filterMethod (query: any, item: any) {
    return item.label.indexOf(query) > -1
  }

  private cancelFun () {
    this.$emit('cancelFun')
  }

  private breadcrumbBack () {
    this.$emit('pageBack')
  }

  public setQueueData (obj?: any) {
    if (obj) {
      if (obj.members && obj.members.length > 0) {
        const uids: any = []
        obj.members.forEach((item: any) => {
          uids.push(item.uid)
          this.$set(this.selectValue, item.uid, item.weight)
        })
        this.uidsArr = uids
      }
      this.baseInfoFrom.name = obj.name
      this.currentQueueId = obj._id
      this.callQueueConfigRef.setCallQueueConfigData(obj.callConfig)
      this.webchatQueueConfigRef.setWebchatQueueConfigData(obj.webchatConfig)
    } else {
      this.baseInfoFrom.name = ''
      this.uidsArr = []
      this.currentQueueId = ''
      this.callQueueConfigRef.setCallQueueConfigData()
      this.webchatQueueConfigRef.setWebchatQueueConfigData()
    }
  }

  private saveFun () {
    const formRef = this.callQueueConfigRef.$refs.callQueueConfigForm as ElForm
    const webchatFormRef = this.webchatQueueConfigRef.$refs.webchatQueueConfigForm as ElForm
    const peerName = this.baseInfoFrom.name
    formRef.validate(valide => {
      if (valide) {
        if (peerName === '' || peerName.length > 100 || peerName.length < 2) {
          this.$message.error('请输入至少2位技能组名称')
          return false
        } else {
          webchatFormRef.validate(valideWebchat => {
            if (valideWebchat) {
              if (this.uidsArr.length > 0) {
                const callConfig = deepClone(this.callQueueConfigRef.callQueueConfigForm)
                const webchatConfig = deepClone(this.webchatQueueConfigRef.webchatQueueConfigForm)
                // const { maxTime, queueLaterTime } = webchatConfig
                // if (maxTime > 0) {
                //   if (queueLaterTime >= maxTime) {
                //     this.$message.error('排队保持时间应小于最大排队时长')
                //     return false
                //   }
                // }
                const members: any = []
                this.uidsArr.forEach((item: any) => {
                  members.push({ uid: item, weight: this.selectValue[item] })
                })
                const name = this.baseInfoFrom.name
                let sendUrl = '/base/action/skillGroup/create'
                let sendData = { members, name, callConfig, webchatConfig }
                let successMsg = '创建技能组成功'
                if (this.currentQueueId !== '') { // 编辑
                  sendUrl = '/base/action/skillGroup/update'
                  sendData = Object.assign({}, sendData, { _id: this.currentQueueId })
                  successMsg = '修改技能组成功'
                }
                const actionData = { url: sendUrl, method: 'POST', data: { ...sendData } }
                organizationConfigModule.organizationCommonAction(actionData).then(res => {
                  this.$emit('saveFun', this.currentQueueId === '' ? 'add' : null)
                  if (!this.currentQueueId) { // 更新缓存
                    this.$addOneCache('queueList', res.data, true)
                  } else {
                    this.$updateCache('queueList', res.data, '_id', true)
                  }
                  this.$message.success(successMsg)
                })
              } else {
                this.$message.error('请添加座席')
              }
            }
          })
        }
      }
    })
  }

  private mounted () {
    this.$nextTick(() => {
      const dom: any = document.getElementsByClassName('el-transfer-panel__body')[1]
      if (dom) {
        dom.classList.add('rightContent')
      }
      this.agentList.forEach((item: any) => {
        if (!this.selectValue[item.key]) {
          this.$set(this.selectValue, item.key, 1)
        }
      })
    })
  }
}
</script>
<style lang="stylus" scoped>
  .addOrEditQueueBox
      border 1px solid $border-main
      // padding 8px 16px 62px 16px
      border-radius 10px
      height calc(100vh - 86px)
      overflow auto
      box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    .bread-crumb
      // margin 10px 0 20px 0
    .queueBoxCont
      margin 24px
      margin-bottom 60px
    .warnText
      margin-bottom 24px
      background $bgc-reminder
      padding 14px
      border-radius 4px
      .el-icon-info
        color $c-warn
        padding-right 6px
        font-size 14px
        vertical-align middle
    .title
      font-size 14px
      color $fc-gray2
      font-weight 600
    .baseInfo
      width 400px
    .label
      float left
      width 65%
      overflow hidden
      text-overflow ellipsis
    .transferIpt
      width 82px
      float right
      display none
    .rightContent .transferIpt
      display block
    .more-btn
      bottom -1px
      right 1px
      width 99%
      height 60px
      padding 0 16px
      line-height 48px
      text-align right
      position absolute
      background #fff
      z-index 20
      .cancel
        margin-right 10px
</style>
<style lang="stylus">
  .addOrEditQueueBox
    .el-transfer__button
      display block
    .el-button+.el-button
      margin-left 0px
    .el-button [class*=el-icon-]+span
      margin-left 0px
    .el-transfer-panel
      width 300px
      .el-transfer-panel__header .el-checkbox .el-checkbox__label
        font-size 14px
      .el-form-item__label
        color #767e92
        font-size 12px
      .el-transfer-panel__item
        margin 10px 10px 10px 0px
      .el-transfer-panel__item.el-checkbox .el-checkbox__label
        font-size 12px
      .el-transfer__button i, .el-transfer__button span
        font-size 12px
    .el-tabs__nav-wrap::after
      // display none
    .el-transfer-panel__filter .el-input__inner
      padding-right 30px
      padding-left 20px
    .el-input__prefix
      left 235px
</style>
